<template>
	<el-dialog v-model="_d.visible" draggable :close-on-click-modal="false" width="400px">
		<template #header>
			<div style="color: #fff">编辑预算</div>
		</template>
	  <el-form class="form-box" :model="_d.form" ref="formRef" label-width="auto">
			<el-form-item label="批复总额" prop="approvedAmount" required>
				<el-input-number style="width: 100%;" v-model="_d.form.approvedAmount" :min="0" placeholder="请输入" clearable />
			</el-form-item>
			<el-form-item label="发布金额" prop="allocatedAmount" required>
				<el-input-number style="width: 100%;" v-model="_d.form.allocatedAmount" :min="0" placeholder="请输入" clearable />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="cancel">关 闭</el-button>
				<el-button :loading="_d.btnLoading" type="primary" @click="save">确 认</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, onMounted } from 'vue';
import { ElNotification } from 'element-plus';
import {verifyPhone, verifyTelPhone} from "/@/utils/toolsValidate.ts";
import {$get, $post} from '/@/utils/request';
import {useUserInfo} from "/@/stores/userInfo.ts";


const emits = defineEmits(['reload']);

const oUserInfo = useUserInfo();
const formRef = ref();

const defalutForm = {
	approvedAmount: '',
	allocatedAmount: '',
}

const _d = reactive({
	visible: false,
	btnLoading: false,

	form: {
		...defalutForm
	},

	// 预算年度
	budgetyear: [],
});

onMounted(() => {
	
});

// 打开弹窗
const open = (row) => {
	_d.row = row;

	setTimeout(() => {
		if(!row) {
			Object.assign(_d.form, defalutForm);
		} else {
			for(let key in _d.form) {
				_d.form[key] = row[key];
			}
		}
		formRef.value.clearValidate();
	}, 30);

	_d.visible = true;
};

// 取消
const cancel = () => {
	_d.visible = false;
};

// 保存
const save = () => {
	formRef.value.validate(async (valid) => {
		if (!valid) return;
		editData();
	})
}

const editData = () => {
	let params = {
		id: _d.row.id,
		..._d.form
	}
	_d.btnLoading = true;
	$post('/budgetSrv/modifybudget', params).then(res => {
		if(res.code == 200) {
			ElNotification({
		    title: '提示',
		    message: '编辑成功',
		    type: 'success',
		  })
			emits('reload');
			_d.visible = false;
		}
	}).finally(() => {
		_d.btnLoading = false;
	})
}

// 导出对象
defineExpose({ open });

</script>
<style lang="scss" scoped>
.form-box {
	min-height: 100px;
}
.budget-ipt {
	:deep(.el-input__inner) {
		text-align: left;
	}
}
</style>
